<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-company-verification-info-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar}px)` }">
      <view class="card">
        <view class="card__bg"></view>
        <view class="card__title">{{ detailInfo.customer_name }}</view>
        <view class="line line--color"></view>
        <view class="card__msg">{{ detailInfo.company_name }}</view>
      </view>

      <view class="review__tips" v-if="showReview">
        <view class="review__status">认证审核中</view>
        <view class="review__msg">{{ detailInfo.status_tips }}</view>
      </view>

      <view class="error__msg" v-if="detailInfo.red_tips != ''">*{{ detailInfo.red_tips }}</view>
      <view class="button">
        <uv-button type="primary" shape="circle" :customStyle="{ marginBottom: '20px', fontSize: '16px', height: '50px' }" @click="goSignPage">去签约</uv-button>
        <uv-button type="primary" shape="circle" :customStyle="{ marginBottom: '20px', fontSize: '16px', height: '50px' }" @click="handleReVerify">重新认证</uv-button>
      </view>

      <view class="info__img">
        <view class="rules">1、 您的权益在当前公司的合作时间内有效，如果您的企业续约合作，权益到期后可再次申请重新认证</view>
        <view class="rules">2、 企业权益只能由本人使用，如果您的签约身份和申请身份不一致，则会取消您的权益</view>
        <view class="rules">3、 如您在居住期间在当前公司离职，到期后您将不再享受当前公司权益</view>
        <!-- <view class="rules">4、 如果您的公司取消与U厝的大客户合作，您的权益也将会终止</view> -->
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { companyVerInfo } from './api'
import { setStorageCache, removeStorageCache } from '@/common/cache'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'infoPage',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      detailInfo: {},
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    // ...mapGetters(),
    showReview() {
      let { status, status_tips } = this.detailInfo
      return (status == '待审核' || status == '认证中') && status_tips
    },
    safeBottomAreaInsets() {
      return `${this.$Platform.device.safeAreaInsets.bottom + 70}px`
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    let info = options.params ? JSON.parse(decodeURIComponent(options.params)) : {}
    if (info?.id) {
      this.detailInfo = info
      return
    }
    this.handleGetInfo()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},

  methods: {
    // ...mapActions([]),
    async handleGetInfo() {
      const res = await companyVerInfo()
      if (res.errcode == 0) {
        this.detailInfo = res.data
      } else if (res.errcode == 70000) {
        uni.$uv.toast(res.errmsg)
        // setTimeout(() => {
        //   this.$ROUTE.go('/pages/subpackage/company-customer-verification/index')
        // }, 1800)
      } else if (res.errcode == 102) {
        uni.$uv.toast(res.errmsg)
        setTimeout(() => {
          this.$ROUTE.go('/pages/subpackage/company-customer-verification/auth', { reVerify: true })
        }, 1800)
      } else {
        uni.$uv.toast(res.errmsg)
        // setTimeout(() => {
        //         this.$ROUTE.go('/pages/subpackage/company-customer-verification/index')
        //       }, 1800)
      }
    },
    goSignPage() {
      this.$ROUTE.go('/pages/subpackage/online-signing/index')
    },
    handleReVerify() {
      uni.showModal({
        title: '更换公司',
        content: `您可认证新的企业员工身份，审核通过后将会获得新公司的专享优惠哦~`,
        confirmText: '重新认证',
        cancelText: '手滑点错',
        success: (res) => {
          if (res.confirm) {
            this.$ROUTE.go('/pages/subpackage/company-customer-verification/auth', { reVerify: true })
          }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.line {
  height: 0.5rpx;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
}
.#{prefixCls('company-verification-info-container')} {
  padding: 30rpx 40rpx;
  padding-bottom: v-bind(safeBottomAreaInsets);
  box-sizing: border-box;
  position: relative;
  .card {
    position: relative;
    box-sizing: border-box;
    padding: 30rpx 20rpx 40rpx;
    background: linear-gradient(to right, $uv-primary, #15c1d7);
    border-radius: 6rpx;
    box-shadow: 0 6rpx 20rpx 0 rgba(16, 118, 132, 0.5);
    color: #ffffff;
    line-height: 1;
  }
  .card__bg {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 188rpx;
    width: 188rpx;
    background: #{cdn('/customer/static/images/company-verification/card_bg.png')} no-repeat;
    background-size: contain;
  }
  .card__title {
    font-size: 36rpx;
    margin-bottom: 28rpx;
  }
  .card__time {
    font-size: 24rpx;
    display: flex;
    align-items: center;
    margin-top: 72rpx;
  }
  .card__range {
    font-size: 24rpx;
  }
  .card__msg {
    font-size: 24rpx;
    margin-top: 40rpx;
    line-height: 1.4;
  }
  .error__msg {
    margin-top: 24rpx;
    font-size: 20rpx;
    line-height: 1.4;
    color: $uv-primary;
  }
  .button {
    margin: 44rpx 24rpx 0;
  }
  .info__img {
    position: absolute;
    padding-right: 30rpx;
    bottom: v-bind(safeBottomAreaInsets);
  }
  .rules {
    font-size: 24rpx;
    line-height: 32rpx;
    color: #999999;
  }
  .review__tips {
    margin-top: 24rpx;
  }
  .review__status {
    display: flex;
    align-items: center;
    color: $uv-primary;
    font-size: 28rpx;
    font-weight: 500;
    &:before {
      content: '';
      display: inline-block;
      width: 32rpx;
      height: 28rpx;
      margin-right: 16rpx;
      background: #{cdn('/customer/static/images/company-verification/icon_shenhe.png')} no-repeat center;
      background-size: contain;
    }
  }
  .review__msg {
    margin-top: 20rpx;
    color: #222;
    font-size: 20rpx;
  }
}
</style>
